<template>
	<view>
		<!-- head -->
		<view class="flex-col" style="height: calc(100vh - 100rpx)">
			<view class="head-box">
				<view class="head-tab align-center bglight">
					<view class="tab-list" v-for="(m,n) in tabBar" :key="n" @click="tabBtn(m.id)">
						<view class="tab-text" :style="tabId==m.id?'color: rgba(255, 255, 255, 1);':''">
							{{$t('fan')[m.text]}}
						</view>
						<view class="tab-bor" v-if="tabId==m.id"></view>
					</view>
				</view>

				<view class="search-box" v-if="tabId==1">
					<view class="align-center">
						<view class="head-inp align-center posRelative"
							:style="{width:(isSearch || iscancel ? '600':'700'  )+ 'rpx'}">
							<image class="inp-img" src="../../static/images/fans/search.png" mode=""></image>
							<input confirm-type="search" @confirm="search" v-model="keyword" id="input"
								class="inp-val gray3" type="text" :placeholder=" this.$t('fan').搜索粉丝昵称_手机号_备注"
								@focus.stop="getfocus" @blur.stop="loseblur" @input.stop="winput">
							<view @click.stop="clearkey()" v-if="keyword!=''&& (isSearch || iscancel )"
								class="posAbsort rt0 top0 flex-col align-center justify-center plr10"
								style="height: 60rpx;">
								<image class="inp-img" src="../../static/images/mine/icon/delete.png" mode=""></image>
							</view>

						</view>
						<view class="ml10 red" v-if="isSearch && keyword!=''" @click="search()">
							<text>{{$t('common').搜索}}</text>
						</view>
						<view class="ml10" v-if="iscancel && keyword==''"><text>{{$t('common').取消}}</text></view>
					</view>
				</view>

				<view class="sx-box align-center" v-if="tabId==1">
					<view class="sx-list align-center justify-center" v-for="(m,n) in sxArr" :key="n"
						@click="sxShow(n)">
						<view v-if="m.seltab && !popup" class="sx-text" :style="m.seltab?'color:#F44A42;':''">
							{{$t('fan')[m.text]}}
						</view>
						<view v-else class="sx-text" :style="selindex==n && popup?'color:black;':''">
							{{$t('fan')[m.text]}}
						</view>
						<image v-if="m.seltab && !popup" class="sx-img"
							:src="m.seltab?'../../static/images/fans/sxy.png':''" mode="widthFix"></image>
						<image v-else class="sx-img"
							:src="selindex==n && popup?'../../static/images/fans/heixia.png':'../../static/images/fans/sxn.png'"
							mode="widthFix"></image>
					</view>

					<!-- 筛选弹窗 -->
					<view class="sxpop-box" @click="close()" v-if="selindex==0 && popup"
						:style="'height:'+(swiperHeight)+'px'">
						<view class="sxpop-con" @click.stop="">
							<!-- 等级 -->
							<view class="grade-con align-center flex-wrap">
								<view class="" :style="{width:(lang=='en'?'200rpx':'160rpx')}" v-for="(m,n) in gradeArr"
									:key="n" :class="[m.selstar?'grade-ac':'',lang=='en'?'grade-listf':'grade-list']"
									@click="gradeBtn(n)">{{$t('fan')[m.text]}}</view>
							</view>

							<view class="align-center ">
								<view class="sxpop-cz sxpop-bot bdte" @click="sxHidedj()">{{$t('common').重置}}</view>
								<view class="sxpop-qd sxpop-bot bdtF4" @click="searchdj()">{{$t('common').查询}}</view>
							</view>
						</view>
					</view>

					<view class="sxpop-box" @click="close()" v-if="selindex==1 && popup"
						:style="'height:'+(swiperHeight)+'px'">
						<view class="sxpop-con">
							<!-- 排序 -->
							<view @click.stop="" class="px-con" :style="'max-height:'+(swiperHeight)+'px'">
								<view class="px-list align-center justify-between" v-for="(m,n) in pxArr" :key="n">
									<view class="px-text">{{$t('fan')[m.text]}}</view>
									<view class="align-center">
										<view class="align-center px-img justify-center"
											:class="m.selpx=='asc'&&pxactive==n?'red fstj-h-t-ac':''"
											@click="pxBtn(n,'asc')" :style="{width:(lang=='en'?'180rpx':'100rpx')}">
											<view class="mr5 ft12"><text>{{$t('common').升序}}</text>
											</view>
											<image
												:src="m.selpx=='asc'&&pxactive==n?'../../static/images/fans/fshongsheng.png':'../../static/images/fans/fshuisheng.png'"
												style="width: 12rpx;height: 24rpx;" mode="aspectFill"></image>
										</view>
										<view class="align-center px-img justify-center"
											:class="m.selpx=='desc'&&pxactive==n?'red fstj-h-t-ac':''"
											@click="pxBtn(n,'desc')" :style="{width:(lang=='en'?'180rpx':'100rpx')}">
											<view class="mr5 ft12"><text>{{$t('common').降序}}</text>
											</view>
											<image
												:src="m.selpx=='desc'&&pxactive==n?'../../static/images/fans/fshongxia.png':'../../static/images/fans/fshuijiang.png'"
												style="width: 12rpx;height: 24rpx;" mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="sxpop-box" @click="close()" v-if="selindex==2 && popup"
						:style="'height:'+(swiperHeight)+'px'">
						<view class="sxpop-con" @click.stop="">
							<!-- 筛选 -->
							<view class="sx-con" :style="'max-height:'+(swiperHeight-45)+'px'">
								<view class="sc-list">
									<view class="sc-tit gray9">{{$t('fan').活跃度}}</view>
									<view class="align-center justify-between flex-wrap">
										<view class="sc-item gray6" :style="{width:(lang=='en'?'500rpx':'340rpx')}"
											v-for="(m,n) in hydArr" :key="n" @click.stop="hydBtn(n)"
											:class="m.selhy?'sc-ac':''">
											{{$t('fan')[m.text]}}
										</view>
									</view>
								</view>

								<view class="sc-list">
									<view class="sc-tit gray9">{{$t('fan').粉丝发展力}}</view>
									<view class="align-center justify-between  flex-wrap">
										<view class="sc-item gray6" style="width: 220rpx;" v-for="(m,n) in fzlArr"
											:key="n" @click="fzlBtn(n)" :class="[m.selfz?'sc-ac':'']">
											{{$t('fan')[m.text]}}
										</view>
										<view style="width: 220rpx;"></view>
									</view>
								</view>

								<view class="sc-list">
									<view class="sc-tit gray9">{{$t('fan').粉丝消费力}}</view>
									<view class="align-center justify-between flex-wrap">
										<view class="sc-item gray6" :style="{width:(lang=='en'?'340rpx':'220rpx')}"
											v-for="(m,n) in xflArr" :key="n" @click="xflBtn(n)"
											:class="m.selxf?'sc-ac':''">
											{{$t('fan')[m.text]}}
										</view>
									</view>
								</view>

								<view class="sc-list">
									<view class="sc-tit gray9">{{$t('fan').粉丝累计销售额}}</view>
									<view class="align-center">
										<input v-model="minimum" step="0.01" class="sc-inp gray3" type="number"
											:placeholder="this.$t('common').最低">
										<view class="sc-bor">—</view>
										<input v-model="highest" step="0.01" class="sc-inp gray3" type="number"
											:placeholder="this.$t('common').最高">
									</view>
								</view>
							</view>
							<view class="align-center">
								<view class="sxpop-cz sxpop-bot bdte" @click="sxHidesx()">{{$t('common').重置}}</view>
								<view class="sxpop-qd sxpop-bot bdtF4" @click="searsx()">{{$t('common').查询}}</view>
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- 列表 -->
			<!-- 粉丝管理 -->
			<view v-if="tabId==1" class="flex1 flex-col overhide tabBox1" style="min-height: 0;">
				<mescroll-uni top='0' :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
					:up="upOption" :down="downOption" bottom="0" :bottombar="false">

					<!-- <fans-list :fsArr="fsArr"></fans-list> -->
					<view class="plr12">
						<view v-if="fsArr.length>0">
							<view class="list-box" v-for="(m,n) in fsArr" :key="n"
								@click="navTo(`/pages/fans/fans-detail?uid=${m.id}`)">
								<view class="list-head">
									<image class="list-img" :src="m.avatar" mode="aspectFill"></image>
									<view class="list-con" style="width: 500rpx;">
										<view class="align-center">
											<view class="list-name gray3"
												:style="{maxWidth:(lang=='en')?'280rpx':'330rpx'}">
												{{m.nickname}}
											</view>
											<!-- 如果是会员/plus会员，显示等级 12-->
											<view class="ml10" v-if="m.level<3">
												<image :src="'../../static/images/icon/vip'+m.level+lang+'.png'"
													mode="heightFix" class="block" style="height: 40rpx;">
												</image>
											</view>
											<!-- 是运营商会员/运营商plus会员，显示星级 34 -->
											<view class="ml10" v-if="m.level>2">
												<image :src="'../../static/images/icon/'+(m.star-1)+lang+'x.png'"
													mode="heightFix" class="block" style="height: 40rpx;">
												</image>
											</view>
										</view>
										<view class="list-bz gray6">{{$t('fan').备注}}:{{m.remark || ''}}</view>

										<view class="align-center flex-wrap lable-box">
											<view v-if="m.active_status==1" class="lable-list lable-four">
												{{$t('fan').未购物}}
											</view>
											<view v-if="m.active_status==2" class="lable-list lable-four">
												{{$t('fan').不活跃}}
											</view>
											<view v-if="m.active_status==3" class="lable-list  lable-three">
												{{$t('fan').低活跃}}
											</view>
											<view v-if="m.active_status==4" class="lable-list  lable-two">
												{{$t('fan').中活跃}}
											</view>
											<view v-if="m.active_status==5" class="lable-list lable-one">
												{{$t('fan').高活跃}}
											</view>

											<view v-if="m.power_status==2" class="lable-list  lable-three">
												{{$t('fan').不利发展}}
											</view>
											<view v-if="m.power_status==3" class="lable-list lable-three">
												{{$t('fan').发展困难}}
											</view>
											<view v-if="m.power_status==4" class="lable-list lable-two">
												{{$t('fan').利好发展}}
											</view>
											<view v-if="m.power_status==5" class="lable-list lable-one">
												{{$t('fan').稳健发展}}
											</view>
											<view v-if="m.power_status==6" class="lable-list lable-one">
												{{$t('fan').发展优异}}
											</view>

											<view v-if="m.consum_status==2" class="lable-list lable-four">
												{{$t('fan').无消费力}}
											</view>
											<view v-if="m.consum_status==3" class="lable-list  lable-three">
												{{$t('fan').低消费力}}
											</view>
											<view v-if="m.consum_status==4" class="lable-list lable-three">
												{{$t('fan').偏低消费力}}
											</view>
											<view v-if="m.consum_status==5" class="lable-list lable-two">
												{{$t('fan').中消费力}}
											</view>
											<view v-if="m.consum_status==6" class="lable-list lable-one">
												{{$t('fan').高消费力}}
											</view>
											<view v-if="m.consum_status==7" class="lable-list lable-one">
												{{$t('fan').超高消费力}}
											</view>
											<!-- <view class="lable-list lable-four">无发展</view> -->
										</view>
									</view>

									<image class="head-right" src="../../static/images/fans/right.png" mode="">
									</image>
								</view>

								<view class="tj-con">

									<view class="align-center justify-between">
										<view class="con-item">
											<view class="con-text">{{$t('fan').本月自购销售额}}</view>
											<view class="con-num" v-if="m.monthgrade[0]">
												{{parseFloat(m.monthgrade[0].self_f_value).toLocaleString()}}
											</view>
											<view class="con-num" v-else>0</view>
										</view>
										<view class="con-item">
											<view class="con-text">{{$t('fan').粉丝本月销售额_已结算}}</view>
											<view class="con-num" v-if="m.monthgrade[0]">
												{{parseFloat(m.monthgrade[0].new_f_valued).toLocaleString() }}
											</view>
											<view class="con-num" v-else>0</view>
										</view>
									</view>
									<view class="align-center justify-between">
										<view class="con-item">
											<view class="con-text">{{$t('fan').粉丝累计销售额}}</view>
											<view class="con-num">
												{{parseFloat(m.total_sell).toLocaleString()|| 0}}
											</view>
										</view>
										<view class="con-item">
											<view class="con-text">{{$t('fan').粉丝本月销售额}}</view>
											<view class="con-num" v-if="m.monthgrade[0]">
												{{parseFloat(m.monthgrade[0].new_f_value).toLocaleString() }}
											</view>
											<view class="con-num" v-else>0</view>
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
			<!-- 整体数据 -->
			<view v-if="tabId==2" class="flex1  flex-col tabBox2" style="overflow-y: scroll;">
				<!-- <fans-ztsj @ztsjBtn="ztsjBtn"></fans-ztsj> -->
				<!-- 				<scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll"> -->
				<mescroll-uni top='0' :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
					:up="upOption" :down="downOption" bottom="0" :bottombar="false">
					<view class="plr12" style="padding-top: 24rpx;">
						<view class="ztsj-box">
							<view class="ztsj-head gray3">{{$t('fan').整体状态}}</view>
							<view class="ztzt-box align-center">
								<view class="ztzt-list flex-col align-center">
									<view class="align-center justify-center" @click="tcShow(1)">
										<view class="ztzt-text gray6">{{$t('fan').整体发展力}}</view>
										<image class="ztzt-icon" src="../../static/images/fans/icon_wenhao.png" mode="">
										</image>
									</view>
									<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
										v-if="totalInfo.power_status==1">
										<image src="../../static/images/fans/huiyuanquan.png"
											style="width: 188rpx;height: 203rpx;">
										</image>
										<view class="posAbsort w100 tc bold gray9"
											style="top: 42%;left: 50%;transform: translate(-50%, -50%);">
											<text>{{$t('common').暂无数据}}</text>
										</view>
									</view>
									<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
										v-if="1<totalInfo.power_status&&totalInfo.power_status<4">
										<image src="../../static/images/fans/lvyuanquan.png"
											style="width: 188rpx;height: 203rpx;">
										</image>
										<view class="posAbsort w100 tc bold gray9"
											style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #70B603;">
											<text>{{totalInfo.power_status==2?this.$t('fan').不利发展:this.$t('fan').发展困难}}</text>
										</view>
									</view>
									<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
										v-if="3<totalInfo.power_status&&totalInfo.power_status<5">
										<image src="../../static/images/fans/huangyuanquan.png"
											style="width: 188rpx;height: 203rpx;">
										</image>
										<view class="posAbsort w100 tc bold gray9"
											style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #FD9E37;">
											<text>{{totalInfo.power_status==4?this.$t('fan').利好发展:''}}</text>
										</view>
									</view>
									<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
										v-if="4<totalInfo.power_status&&totalInfo.power_status<7">
										<image src="../../static/images/fans/hongyuanquan.png"
											style="width: 188rpx;height: 203rpx;">
										</image>
										<view class="posAbsort w100 tc bold gray9"
											style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #F44A42;">
											<text>{{totalInfo.power_status==5?this.$t('fan').稳健发展:this.$t('fan').发展优异}}</text>
										</view>
									</view>
								</view>
								<view class="ztzt-list flex-col align-center">
									<view class="align-center justify-center" @click="tcShow(2)">
										<view class="ztzt-text gray6">{{$t('fan').整体活跃度}}</view>
										<image class="ztzt-icon" src="../../static/images/fans/icon_wenhao.png" mode="">
										</image>
									</view>
									<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
										v-if="0<totalInfo.consum_status&&totalInfo.consum_status<3">

										<image src="../../static/images/fans/huiyuanquan.png"
											style="width: 188rpx;height: 203rpx;">
										</image>
										<view class="posAbsort w100 tc bold gray9"
											style="top: 42%;left: 50%;transform: translate(-50%, -50%);">
											<text>{{totalInfo.consum_status==2?this.$t('fan').无消费力:this.$t('common').暂无数据}}</text>
										</view>
									</view>
									<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
										v-if="2<totalInfo.consum_status&&totalInfo.consum_status<5">
										<image src="../../static/images/fans/lvyuanquan.png"
											style="width: 188rpx;height: 203rpx;">
										</image>
										<view class="posAbsort w100 tc bold gray9"
											style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #70B603;">
											<text>{{totalInfo.consum_status==4?this.$t('fan').偏低消费力:this.$t('fan').低消费力}}</text>
										</view>
									</view>
									<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
										v-if="totalInfo.consum_status==5">
										<image src="../../static/images/fans/huangyuanquan.png"
											style="width: 188rpx;height: 203rpx;">
										</image>
										<view class="posAbsort w100 tc bold gray9"
											style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #FD9E37;">
											<text>{{this.$t('fan').中消费力}}</text>
										</view>
									</view>
									<view class="posRelative mt10" style="width: 188rpx;height: 203rpx;"
										v-if="5<totalInfo.consum_status&&totalInfo.consum_status<8">
										<image src="../../static/images/fans/hongyuanquan.png"
											style="width: 188rpx;height: 203rpx;">
										</image>
										<view class="posAbsort w100 tc bold gray9"
											style="top: 42%;left: 50%;transform: translate(-50%, -50%);color: #F44A42;">
											<text>{{totalInfo.consum_status==6?this.$t('fan').高消费力:this.$t('fan').超高消费力}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 销售额统计 -->
						<view class="ztsj-box">
							<view class="ztsj-head gray3 align-center" style="border-bottom: 2rpx solid #EEEEEE;">
								<view><text>{{$t('fan').销售额统计}}</text></view>
								<!-- 				<image @click="tcShow(5)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
										src="../../static/images/fans/icon_wenhao.png" mode=""></image> -->
							</view>

							<view class="fstj-list">
								<view class="align-center">
									<view class="fstj-h-tab" v-for="(m,n) in xseTab" :key="n"
										:class="n==xseId?'fstj-h-t-ac':''" @click="xseBtn(n)">
										{{$t('common')[m.text]}}
									</view>
								</view>
							</view>

							<view class="cjtj-box" style="padding-top: 0;" v-if="totalInfo">
								<view class="align-center">
									<view v-if="xseId==0">
										<view class="cjtj-rs gray3">
											{{$t('fan').销售额}}：{{totalInfo.moon_settl_sell || 0}}
										</view>
										<!-- 						<view class="cjtj-rs gray3">
												{{$t('fan').贡献收益}}:{{totalInfo.devote || 0}}
											</view> -->
									</view>
									<view v-if="xseId==1">
										<view class="cjtj-rs gray3">
											{{$t('fan').销售额}}：{{totalInfo.up_moon_settl_sell || 0 }}
										</view>
										<!-- 						<view class="cjtj-rs gray3">
												{{$t('fan').贡献收益}}:{{totalInfo.up_devote || 0}}
											</view> -->
									</view>
									<view v-if="xseId==2">
										<view class="cjtj-rs gray3">
											{{$t('fan').销售额}}：{{totalInfo.total_sell|| 0 }}
										</view>
										<!-- 						<view class="cjtj-rs gray3">
												{{$t('fan').贡献收益}}:{{totalInfo.total_devote || 0}}
											</view> -->
									</view>
								</view>
								<view class="charts-box" style="width: 650rpx;height: 500rpx;">
									<l-echart ref="chartRef" @finished="initx"></l-echart>
								</view>
							</view>
						</view>

						<!-- 本月新增销售额趋势 -->
						<view class="ztsj-box">
							<view class="ztsj-head gray3">{{$t('fan').本月新增销售额趋势}}</view>
							<view class="charts-box">
								<qiun-data-charts type="line" :opts="byxzOpts" :chartData="byxzChart" :ontouch="true" />
							</view>
						</view>

						<!-- 已结算销售额统计 -->
						<view class="ztsj-box">
							<view class="ztsj-head gray3">{{$t('fan').已结算销售额统计}}</view>
							<view class="yjs-box">
								<view class="align-center flex-wrap">
									<view class="yjs-list" v-for="(m,n) in yjsArr" :key="n">
										<view class="gray6 yjs-text">{{$t('fan')[m.text]}}</view>
										<view class="gray3 yjs-num">{{m.num.toLocaleString()}}</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 本月已结算销售额趋势 -->
						<view class="ztsj-box">
							<view class="ztsj-head gray3">{{$t('fan').本月已结算销售额趋势}}</view>
							<view class="charts-box">
								<qiun-data-charts type="line" :opts="byjsOpts" :chartData="byjsChart" :ontouch="true" />
							</view>
						</view>

						<!-- 销售统计 -->
						<view class="ztsj-box">
							<view class="ztsj-head gray3" style="border-bottom: 2rpx solid #EEEEEE;">
								<text>{{$t('fan').销售统计}}</text>
								<image @click="tcShow(5)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
									src="../../static/images/fans/icon_wenhao.png" mode=""></image>
							</view>
							<view class="fstj-list" style="border-bottom: 2rpx solid #EEEEEE;">
								<view class="fsth-head align-center justify-between">
									<view class="align-center">
										<view class="fstj-h-tab" v-for="(m,n) in xstjTab" :key="n"
											:class="n==xstjId?'fstj-h-t-ac':''" @click="xstjBtn(n)">
											{{$t('common')[m.text]}}
										</view>
									</view>
								</view>

								<view class="align-center justify-around">
									<view class="fstj-l-item" v-for="(m,n) in xstjArr" :key="n">
										<view class="fstj-l-text gray6">{{$t('common')[m.text]}}</view>
										<view class="fstj-l-num gray3">{{m.num}}</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 粉丝统计 -->
						<view class="ztsj-box">
							<view class="ztsj-head gray3" style="border-bottom: 2rpx solid #EEEEEE;">
								<text>{{$t('fan').按等级统计粉丝人数}}</text>
								<image @click="tcShow(6)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
									src="../../static/images/fans/icon_wenhao.png" mode=""></image>
							</view>
							<view class="fstj-list" style="border-bottom: 2rpx solid #EEEEEE;">
								<view class="align-center">
									<view class="fstj-h-tab" v-for="(m,n) in djTab" :key="n"
										:class="n==djId?'fstj-h-t-ac':''" @click="djBtn(n)">{{$t('common')[m.text]}}
									</view>
								</view>
								<view class="align-center flex-wrap ">
									<view class="fstj-l-item " style="width: 50%;" v-for="(m,n) in djArr" :key="n">
										<view class="fstj-l-text gray6">{{$t('fan')[m.text]}}</view>
										<view class="fstj-l-num gray3">{{m.num}}</view>
									</view>
								</view>
							</view>
						</view>

						<view class="ztsj-box">
							<view class="ztsj-head gray3 align-center" style="border-bottom: 2rpx solid #EEEEEE;">
								<text>{{$t('fan').按活跃度统计粉丝人数}}</text>
								<image @click="tcShow(3)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
									src="../../static/images/fans/icon_wenhao.png" mode=""></image>
							</view>
							<view class="fstj-list" style="padding: 0rpx 0 20rpx;">
								<view class="align-center flex-wrap">
									<view class="fstj-l-item" v-for="(m,n) in hydArrz" :key="n">
										<view class="fstj-l-text gray6">{{$t('fan')[m.text]}}</view>
										<view class="fstj-l-num gray3">{{m.num}}</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 成交粉丝统计 -->
						<view class="ztsj-box">
							<view class="align-center">
								<view class="ztsj-head gray3">{{$t('fan').成交粉丝统计}}</view>
								<image style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
									src="../../static/images/fans/icon_wenhao.png" mode="" @click="tcShow(4)">
								</image>
							</view>

							<view class="align-center">
								<view class="fstj-h-tab" v-for="(m,n) in cjtjTab" :key="n"
									:class="n==cjtjId?'fstj-h-t-ac':''" @click="cjtjBtn(n)">{{$t('common')[m.text]}}
								</view>
							</view>


							<view class="cjtj-box">
								<view class="align-center">
									<view>
										<view class="cjtj-rs gray3 ft14" v-if="cjtjId==0">{{$t('fan').成交人数}}
											({{$t('index').人}}):{{totalInfo.day_fans_deal_num || 0}}
										</view>
										<view class="cjtj-rs gray3" v-if="cjtjId==0">
											{{$t('fan').首购粉丝客单价}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):
											{{totalInfo.day_fans_first_price |changeCurrency}}
										</view>
										<view class="cjtj-rs gray3" v-if="cjtjId==0">
											{{$t('fan').复购粉丝客单价}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):
											{{totalInfo.day_fans_repeat_price|changeCurrency}}
										</view>
									</view>
									<view>
										<view class="cjtj-rs gray3" v-if="cjtjId==1">{{$t('fan').成交人数}}
											({{$t('index').人}}):{{totalInfo.moon_fans_deal_num}}
										</view>
										<view class="cjtj-rs gray3" v-if="cjtjId==1">
											{{$t('fan').首购粉丝客单价}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):
											{{totalInfo.moon_fans_first_price|changeCurrency}}
										</view>
										<view class="cjtj-rs gray3" v-if="cjtjId==1">
											{{$t('fan').复购粉丝客单价}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):
											{{totalInfo.moon_fans_repeat_price|changeCurrency}}
										</view>
									</view>
									<view>
										<view class="cjtj-rs gray3" v-if="cjtjId==2">{{$t('fan').成交人数}}
											({{$t('index').人}}):{{totalInfo.total_fans_deal_num}}
										</view>
										<view class="cjtj-rs gray3" v-if="cjtjId==2">
											{{$t('fan').首购粉丝客单价}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):
											{{totalInfo.total_fans_first_price|changeCurrency}}
										</view>
										<view class="cjtj-rs gray3" v-if="cjtjId==2">
											{{$t('fan').复购粉丝客单价}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):
											{{totalInfo.total_fans_repeat_price|changeCurrency}}
										</view>
									</view>


								</view>
								<view class="" style="width: 650rpx;height: 500rpx;">
									<!-- <qiun-data-charts tooltipFormat="yAxisDemo1" type="ring" :opts="cjfsOpts" :chartData="cjfsChart" /> -->
									<l-echart ref="chartReff" @finished="initf"></l-echart>
								</view>
							</view>
						</view>

						<!-- 粉丝商品偏好 -->
						<view class="ztsj-box">
							<view class="align-center" style="border-bottom: 2rpx solid #EEEEEE;">
								<view class="ztsj-head gray3">{{$t('fan').粉丝商品偏好}}</view>
								<!-- <image style="width: 28rpx;margin-left: 12rpx;" src="../../static/images/fans/icon_wenhao.png" mode="widthFix"></image> -->
							</view>

							<view class="fsph-box">
								<view class="align-center">
									<view class="fstj-h-tab" v-for="(m,n) in fsphYtab" :key="n"
										:class="n==fsphYindex?'fstj-h-t-ac':''" @click="fsphYbtn(n)">
										{{$t('common')[m.text]}}
									</view>
								</view>

								<view class="align-center" style="margin-top: 34rpx;">
									<view class="fstj-h-tab" v-for="(m,n) in fsphTtab" :key="n"
										:class="n==fsphTindex?'fstj-h-t-ac':''" @click="fsphTbtn(n)">
										{{$t('common')[m.text]}}
									</view>
								</view>

								<view class="fsph-con">
									<view class="align-center fsph-c-head">
										<view class="fsph-l-a fsph-h-pub gray3">{{$t('fan').排名}}</view>
										<view class="fsph-l-b fsph-h-pub gray3">{{$t('fan').商品名称}}</view>
										<view class="fsph-l-c fsph-h-pub gray3">{{$t('fan').购买数量}}</view>
									</view>
									<view class="fsph-list">
										<!-- v-if="fsphLists.length>0" -->
										<view>
											<view class="align-center fsph-item" v-for="(m,n) in fsphLists" :key="n">
												<view class="fsph-l-a fsph-i-pub gray3 ">
													{{n==fsphLists.length-1?$t('fan').合计:n+1}}
												</view>
												<view class="fsph-l-b fsph-i-pub gray3 " style="text-align: left;">
													{{m.store_name}}
												</view>
												<view class="fsph-l-c fsph-i-pub gray3 ">{{m.total_product_num}}
												</view>
											</view>
										</view>
									</view>
									<!-- 					<view class="align-center justify-between fsph-c-bot">
											<view class="gray3" style="font-size: 28rpx;">{{$t('fan').合计}}</view>
											<view class="gray3" style="font-size: 28rpx;">{{fsphTotalnum}}</view>
										</view> -->
								</view>
							</view>
						</view>

						<!-- 整体发展力 弹窗 -->
						<u-popup :show="tcpop" mode="center" round="10" :safeAreaInsetBottom="false">
							<view class="tc-box">
								<view class="align-center tc-head">
									<image class="tc-h-icon" src="../../static/images/fans/shu-bor.png"
										mode="aspectFill" style="width: 7rpx;height: 33rpx;"></image>
									<view class="tc-h-tit gray3">
										<text v-if="tcType==1">{{$t('fan').整体发展力}}</text>
										<text v-if="tcType==2">{{$t('fan').整体消费力}}</text>
										<text v-if="tcType==3">{{$t('fan').粉丝活跃度}}</text>
										<text v-if="tcType==4">{{$t('fan').成交粉丝}}</text>
										<text v-if="tcType==5">{{$t('fan').销售统计}}</text>
										<text v-if="tcType==6">{{$t('fan').粉丝等级人数统计}}</text>
									</view>
								</view>
								<view class="tc-h-text gray9">
									<text v-if="tcType==1">{{$t('fan').粉丝人数需达标50人及以上}}</text>
									<text v-if="tcType==2">{{$t('fan').粉丝人数需达标50人及以上}}</text>
									<text v-if="tcType==3">{{$t('fan').数据统计截止至前一天}}</text>
								</view>

								<view>
									<!-- 整体发展力 -->
									<view class="tc-con" v-if="tcType==1">
										<view class="tc-c-head align-center">
											<view class="tc-c-a tc-c-text gray3">
												<!-- <view>{{$t('fan').团队直接}}{{$t('fan').邀请成员数}}</view> -->
												<view>{{$t('fan').团队直接邀请粉丝数}}</view>
												<!-- <view>{{$t('fan').邀请成员数}}</view> -->
											</view>
											<view class="tc-c-b tc-c-text gray3">
												<!-- 								<view>{{$t('fan').最大部门业绩}}</view>
													<view>{{$t('fan').占自己业绩比}}</view> -->

												<view>{{$t('fan').最大粉丝销售额占自己销售额比}}</view>
											</view>
											<view class="tc-c-c tc-c-text gray3">{{$t('fan').团队发展力}}</view>
										</view>

										<view class="tc-c-list">
											<view class="align-center tc-c-item">
												<view class="tc-c-a tc-c-text gray3">1{{$t('fan').位}}</view>
												<view class="tc-c-b tc-c-text gray3">
													<view>{{$t('fan').大于等于80}}</view>
													<view>{{$t('fan').大于等于60小于80}}</view>
													<view>{{$t('fan').大于等于30小于60}}</view>
													<view>{{$t('fan').大于0小于30}}</view>
													<view>{{$t('fan').等于0}}</view>
												</view>
												<view class="tc-c-c tc-c-text gray3">
													<view>{{$t('fan').不利发展}}</view>
													<view>{{$t('fan').发展困难}}</view>
													<view>{{$t('fan').发展困难}}</view>
													<view>{{$t('fan').发展困难}}</view>
													<view>{{$t('fan').发展困难}}</view>
												</view>
											</view>
										</view>
										<view class="tc-c-list" style="background-color: #F8F8F8;">
											<view class="align-center tc-c-item">
												<view class="tc-c-a tc-c-text gray3">2{{$t('fan').位及以上}}</view>
												<view class="tc-c-b tc-c-text gray3">
													<view>{{$t('fan').大于等于80}}</view>
													<view>{{$t('fan').大于等于60小于80}}</view>
													<view>{{$t('fan').大于等于30小于60}}</view>
													<view>{{$t('fan').大于0小于30}}</view>
													<view>{{$t('fan').等于0}}</view>
												</view>
												<view class="tc-c-c tc-c-text gray3">
													<view>{{$t('fan').发展困难}}</view>
													<view>{{$t('fan').利好发展}}</view>
													<view>{{$t('fan').稳健发展}}</view>
													<view>{{$t('fan').发展优异}}</view>
													<view>{{$t('fan').发展困难}}</view>
												</view>
											</view>
										</view>
									</view>

									<!-- 整体消费力 -->
									<view class="tc-con" v-if="tcType==2">
										<view class="tc-c-head align-center">
											<view class="tc-c-a tc-c-text gray3"
												style="width: 439rpx;border-right: 2rpx solid #EEEEEE;">
												<view>{{$t('fan').近三个月消费人数占团队总人数比}}</view>
												<!-- <view>{{$t('fan').占团队总人数比}}</view> -->
											</view>
											<view class="tc-c-c tc-c-text gray3">{{$t('fan').消费力}}</view>
										</view>
										<view class="tc-c-list">
											<view class="align-center tc-c-item" v-for="(m,n) in ztxfl" :key="n">
												<view class="tc-c-a tc-c-text gray3"
													style="width: 439rpx;border-right: 2rpx solid #EEEEEE;">
													{{$t('fan')[m.title]}}
												</view>
												<view class="tc-c-c tc-c-text gray3">{{$t('fan')[m.cont]}}</view>
											</view>
										</view>
									</view>

									<!-- 粉丝活跃度 -->
									<view class="tc-con" v-if="tcType==3">
										<view class="tc-c-list">
											<view class="align-center tc-c-item" v-for="(m,n) in fshyArr" :key="n">
												<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
													{{$t('fan')[m.title]}}
												</view>
											</view>
										</view>
									</view>


									<!-- 成交粉丝 -->
									<view class="tc-con" v-if="tcType==4">
										<view class="tc-c-list">
											<view class="align-center tc-c-item">
												<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
													{{$t('fan').首购粉丝_仅下单一次的粉丝}}
												</view>
											</view>
											<view class="align-center ">
												<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
													{{$t('fan').复购粉丝_在所选时间内下单2单及以上的粉丝}}
												</view>
											</view>
										</view>
									</view>
									<!-- 销售额统计 -->
									<view class="tc-con" v-if="tcType==5">
										<view class="tc-c-list">
											<view class="align-center tc-c-item">
												<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
													{{$t('fan').PLUS套组在今日本月上月粉丝成功下单PLUS套组的数量不包含取消退款订单}}
												</view>
											</view>
											<view class="align-center ">
												<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
													{{$t('fan').运营商套组在今日本月上月粉丝成功下单必买套组的数量不包含取消退款订单}}
												</view>
											</view>
										</view>
									</view>
									<!-- 等级统计 -->
									<view class="tc-con" v-if="tcType==6">
										<view class="tc-c-list">
											<view class="align-center tc-c-item" v-for="(item,index) in djtjArr "
												:key="index">
												<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
													{{$t('fan')[item.title]}}
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="tc-bot" @click="tcHide()">{{$t('fan').我知道了}}</view>
								<image class="tc-h-gb" @click="tcHide()" src="../../static/images/fans/icon_cuowu.png"
									mode=""></image>
							</view>
						</u-popup>
					</view>
					<!-- </scroll-view> -->
				</mescroll-uni>
			</view>

		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	// import * as echarts from 'echarts'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {
					auto: true
				},
				upOption: {
					auto: false,
					page: {
						num: 0,
						size: 20,
					},
					textNoMore: this.$t('common').已经到底了,
					empty: {
						tip: this.$t('common').暂无数据 // 空提示
					}
				},

				wHeight: 0, //屏幕高度
				swiperHeight: 0, //滚动区域高度
				keyword: '', //搜索关键字
				isSearch: false, //是否搜索
				iscancel: false, //是否取消
				// tab
				tabBar: [{
						id: 1,
						text: '粉丝列表'
					},
					{
						id: 2,
						text: '整体数据'
					}
				],
				tabId: 1, //切换标题
				// 筛选tab
				sxArr: [{
						id: 1,
						text: '等级'
					},
					{
						id: 2,
						text: '排序'
					},
					{
						id: 3,
						text: '筛选'
					}
				],
				// 等级
				gradeArr: [{
						id: 5,
						text: '五星',
						star: 6
					},
					{
						id: 4,
						text: '四星',
						star: 5
					},
					{
						id: 3,
						text: '三星',
						star: 4
					},
					{
						id: 2,
						text: '二星',
						star: 3
					},
					{
						id: 1,
						text: '一星',
						star: 2
					},
					{
						id: 0,
						text: '零星',
						star: 1
					},
					{
						id: 7,
						text: 'PLUS会员',
						level: 2
					},
					{
						id: 8,
						text: '会员',
						level: 1
					}
				],
				// 排序
				pxArr: [{
						id: 1,
						text: '注册时间',
						name: 'reg', //注册时间
					},
					{
						id: 2,
						text: '最近下单时间',
						name: 'final_order', //最后下单时间
					},
					{
						id: 3,
						text: 'PLUS到期时间',
						name: 'puls_expiration', //PlUS到期时间
					},
					{
						id: 4,
						text: '粉丝累计销售额',
						name: 'fans_order', // 粉丝累计销售额
						selpx: 'desc'
					},
					// {
					// 	id: 5,
					// 	text: '粉丝累计贡献收益',
					// 	name: 'fans_sell', // 粉丝累计贡献收益
					// },
					{
						id: 6,
						text: '粉丝本月销售额_已结算',
						name: 'fans_moon_sell', // 粉丝本月销售额
					},
					{
						id: 7,
						text: '粉丝本月新增销售额',
						name: 'fans_add_moon_sell', // 本月新增销售额
					},
					{
						id: 8,
						text: '本月自购销售额',
						name: 'fans_self_moon_sell', // 本月自购销售额
					}
				],
				// 活跃度
				hydArr: [{
						id: 5,
						text: '高活跃1个月内有下单'
					},
					{
						id: 4,
						text: '中活跃13个月内有下单'
					},
					{
						id: 3,
						text: '低活跃36个月内有下单'
					},
					{
						id: 2,
						text: '不活跃超过6个月未下单'
					},
					{
						id: 1,
						text: '未购物从未下单'
					}
				],
				// 整体发展力
				fzlArr: [{
						id: 1,
						text: '无发展'
					},
					{
						id: 2,
						text: '不利发展'
					},
					{
						id: 3,
						text: '发展困难'
					},
					{
						id: 4,
						text: '利好发展'
					},
					{
						id: 5,
						text: '稳健发展'
					},
					{
						id: 6,
						text: '发展优异'
					}
				],
				// 整体消费力
				xflArr: [{
						id: 2,
						text: '无消费力'
					},
					{
						id: 3,
						text: '低消费力'
					},
					{
						id: 4,
						text: '偏低消费力'
					},
					{
						id: 5,
						text: '中消费力'
					},
					{
						id: 6,
						text: '高消费力'
					},
					{
						id: 7,
						text: '超高消费力'
					}
				],
				fsArr: [], //粉丝列表
				selindex: -1, //选中的下标
				popup: false, //是否打开弹窗
				minimum: '', //最低
				highest: '', //最高
				pxactive: 3, //排序的下标
				star: '', //选中的星级
				level: '', //选中的等级
				active_status: '', //用户的活跃状态
				power_status: '', //用户的发展力
				consum_status: '', //用户的消费力
				isfocus: false,
				swiperHeight1: '',
				swiperHeight2: '',
				// lang: '',

				tcpop: false, //弹窗是否打开
				tcType: 1, //1整体发展力

				// 销售额---
				xseTab: [{
						id: 1,
						text: '本月'
					},
					{
						id: 2,
						text: '上月'
					},
					{
						id: 3,
						text: '累计'
					}
				],
				xseId: 0,
				// 数据
				xsetjChart: {},
				// 样式配置
				xsetjOpts: {
					color: ["#F89D0E", "#4DCBB3", "#775AED"],
					tooltip: {
						trigger: 'item',
						backgroundColor: "rgba(102, 102, 102, 0.8)",
						borderColor: 'none',
						textStyle: {
							color: "#ffffff"
						},
						formatter: function(param) {
							return param.marker + param.name + '\n' + (param.value).toLocaleString() + ' ' + '(' +
								param.percent + ')%';
						}
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['30%', '40%'],
						center: ['50%', '60%'],
						data: '',
						label: {
							width: 100, //隐藏标示文字
							fontSize: 12,
							formatter: '{a}\n{b}  \n{c} \n{d}%',

						},
						labelLine: {
							length: 25,
						},
					}, ],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				},
				// 销售额---

				// 本月新增---
				// 样式配置
				byxzOpts: {
					color: ["#1890FF"],
					padding: [15, 24, 0, 10],
					// enableScroll: true,
					dataLabel: false,
					fontSize: 10,
					legend: {
						show: false
					},

					xAxis: {
						disableGrid: true,
						// scrollShow: true,
						// itemCount: 4,
						rotateLabel: true,
						marginTop: 10,
						rotateAngle: 45,
						labelCount: 4,
						fontSize: 10,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							axisLine: false,
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						tooltip: {
							bgColor: "#333333",
							borderRadius: 4,
							legendShow: false
						}
					}
				},

				// 数据本月新增---
				byxzChart: {},

				// 本月结算---
				// 样式配置
				byjsOpts: {
					color: ["#1890FF"],
					padding: [15, 24, 0, 10],
					// enableScroll: true,
					dataLabel: false,
					fontSize: 10,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						// scrollShow: true,
						// itemCount: 4,
						rotateLabel: true,
						marginTop: 10,
						rotateAngle: 45,
						labelCount: 4,
						fontSize: 10,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						// fontSize: 8,
						data: [{
							axisLine: false,
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						tooltip: {
							bgColor: "#333333",
							borderRadius: 4,
							legendShow: false
						}
					}
				},

				// 数据
				byjsChart: {},
				// 本月结算---

				// 按等级---
				djTab: [{
						id: 1,
						text: '今日'
					},
					{
						id: 2,
						text: '本月'
					},
					{
						id: 3,
						text: '全部'
					}
				],
				djId: 0,
				// 按等级---

				// 成交粉丝统计---
				cjtjTab: [{
						id: 1,
						text: '今日'
					},
					{
						id: 2,
						text: '本月'
					},
					{
						id: 3,
						text: '累计'
					}
				],
				cjtjId: 0,
				// 成交粉丝数据
				cjfsChart: {},
				// 样式配置
				cjfsOpts: {
					color: ["#F89D0E", "#FF665F"],
					tooltip: {
						trigger: 'item',
						backgroundColor: "rgba(102, 102, 102, 0.8)",
						borderColor: 'none',
						textStyle: {
							color: "#ffffff",

						},
						formatter: function(param) {
							return param.marker + param.name + '\n' + (param.value).toLocaleString() + ' ' + '(' +
								param.percent + ')%';
						},
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['30%', '40%'],
						center: ['50%', '60%'],
						data: '',
						label: {
							width: 100, //隐藏标示文字
							fontSize: 12,
							formatter: '{a}\n{b}  \n{c} \n{d}%'
						},
						labelLine: {
							length: 25,
						},
					}, ],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				},
				// 成交粉丝统计---

				// 粉丝商品偏好---
				fsphYtab: [{
						id: 1,
						text: '本月'
					},
					{
						id: 2,
						text: '上月'
					},
				],
				fsphYindex: 0,
				fsphTtab: [{
						id: 3,
						text: 'plus套组'
					},
					{
						id: 4,
						text: '运营商套组'
					},
					{
						id: 1,
						text: '其他商品'
					},
				],
				fsphTindex: 0,
				// 粉丝商品偏好---,
				thisMonth: '', //本月
				lastMonth: '', //上月
				month: '', //选中的月份
				fsphLists: [], //粉丝商品偏好数组
				fsphTotalnum: 0, //粉丝偏好合计
				totalInfo: {}, //整体数据
				salesStatistics: [], //销售额统计
				cjfstjArr: [], //销售额统计
				// 整体数据
				yjsArr: [{
						text: '本月已结算销售额',
						num: 0
					},
					{
						text: '预估本月结算销售额',
						num: 0
					},
					{
						text: '预估未来7天结算销售额',
						num: 0
					},
					{
						text: '上月已结算销售额',
						num: 0
					},
				],
				djArr: [{
						text: '会员',
						num: 0
					},
					{
						text: 'plus会员',
						num: 0
					},
					{
						text: '运营商会员',
						num: 0
					},
					{
						text: '运营商plus会员',
						num: 0
					},
				],
				hydArrz: [{
						text: '高活跃粉丝',
						id: 5,
						num: 0
					},
					{
						text: '中活跃粉丝',
						id: 4,
						num: 0
					},
					{
						text: '低活跃粉丝',
						id: 3,
						num: 0
					},
					{
						text: '不活跃粉丝',
						id: 2,
						num: 0
					},
					{
						text: '未购物粉丝',
						id: 1,
						num: 0
					},
				],
				categoriesadd: [], //本月新增
				addseriesData: [], //本月新增
				categoriessettl: [], //已结算销售额
				settlseriesData: [], //已结算销售额
				djtjArr: [{
						title: '会员在今日本月加入成为会员且未升级的粉丝人数'
					},
					{
						title: 'PLUS会员在今日本月从会员升级成为PLUS会员的粉丝人数'
					},
					{
						title: '运营商会员在今日本月升级成为运营商会员的粉丝人数'
					},
					{
						title: '运营商PLUS会员在今日本月升级成为运营商PLUS会员的粉丝人数包含会员升级运营商PLUS会员PLUS会员升级运营商PLUS会员运营商会员升级运营商PLUS会员'
					},
					{
						title: '筛选全部为查看当前团队下各等级粉丝人数'
					}
				], //等级统计
				fshyArr: [{
						title: '高活跃粉丝一个月内有下单'
					},
					{
						title: '中活跃粉丝13个月内有下单'
					},
					{
						title: '低活跃粉丝36个月内有下单'
					},
					{
						title: '不活跃粉丝超过6个月未下单'
					},
					{
						title: '未购物粉丝从未下单'
					}
				], //粉丝活跃
				// 整体消费力
				ztxfl: [{
						title: 'ling',
						cont: '无消费力'
					},
					{
						title: '小于10',
						cont: '低消费力'
					},
					{
						title: '大于等于10小于30',
						cont: '偏低消费力'
					},
					{
						title: '大于等于30小于60',
						cont: '中消费力'
					},
					{
						title: '大于等于60小于80',
						cont: '高消费力'
					},
					{
						title: '大于等于80',
						cont: '超高消费力'
					}
				],
				xstjTab: [{
					id: 1,
					text: '今日'
				}, {
					id: 2,
					text: '本月'
				}, {
					id: 3,
					text: '上月'
				}],
				xstjArr: [{
						text: 'plus套组',
						num: 0
					},
					{
						text: '运营商套组',
						num: 0
					},
				],
				xstjId: 0
			}
		},
		computed: {
			lang() {
				return this.$store.state.lang
			},
		},
		onLoad() {
			let newsObj = uni.getSystemInfoSync();
			this.wHeight = newsObj.windowHeight;

		},
		onShow() {
			// this.getfenlistAPI()
			this.$utils.changeFooterLang()
			this.selindex = 1
			// this.pxBtn(3,'desc')
			uni.setNavigationBarTitle({
				title: this.$t('fan').粉丝管理
			})
			console.log(this.lang)
			// this.lang = uni.getStorageSync('lang').lang

		},
		mounted() { //获取head-box高度。计算可滚动区域高度
			const query = uni.createSelectorQuery().in(this);
			query.select('.head-box').boundingClientRect(data => {
				this.swiperHeight = this.wHeight - data.height;
				this.swiperHeight1 = this.swiperHeight;
				this.swiperHeight2 = this.swiperHeight + 89;
			}).exec();
		},

		methods: {
			// 搜索框聚焦时
			getfocus() {
				console.log(this.keyword)
				if (this.keyword != '') {
					console.log(this.keyword != '')
					this.isSearch = true
				} else {
					this.iscancel = true
				}

			},
			// 失去焦点
			loseblur() {
				setTimeout(() => {
					this.isSearch = false
					this.iscancel = false
				}, 100)
			},
			// 键盘输入时
			winput(e) {
				this.keyword = e.detail.value
				if (this.keyword) {
					this.isSearch = true
					this.iscancel = false
				} else {
					this.isSearch = false
					this.iscancel = true
					// this.getfenlistAPI()
					this.mescroll && this.mescroll.resetUpScroll()
				}

			},
			clearkey() {
				this.isfocus = true
				this.iscancel = true
				this.keyword = ''
				// this.getfenlistAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// 搜索商品
			async search() {
				if (!this.keyword) {
					return this.$utils.msg(this.$t('fan').搜索粉丝昵称_手机号_备注)
				}
				// this.getfenlistAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// tab点击
			async tabBtn(val) {
				this.tabId = val;
				if (val == 1) {
					// console.log(this.swiperHeight1)
					// this.swiperHeight = this.swiperHeight1;
					this.mescroll && this.mescroll.resetUpScroll()
					// this.upOption.textNoMore = '已经到底了'
					// console.log(this.upOption.textNoMore)
				} else {
					// console.log(this.swiperHeight1)
					// this.swiperHeight = this.swiperHeight2;
					// this.getnow()
					// this.getoveralldataAPI()
					// this.getServerData()
					this.xseId = 0
					this.xstjId = 0
					this.djId = 0
					this.cjtjId = 0
					this.fsphYindex = 0
					this.fsphTindex = 0
					this.mescroll && this.mescroll.resetUpScroll()
					// this.upOption.textNoMore = ''
					// console.log(this.upOption.textNoMore)
					// this.mescroll && this.mescroll.resetUpScroll()
					// this.mescroll.scrollTo(0) //滚动列表到指定位置 y=0,则回到列表顶部; t时长,单位ms,

				}
			},

			// -------粉丝
			// 筛选弹窗打开
			sxShow(val) {
				if (this.selindex == val && !this.sxArr[this.selindex].seltab) {
					this.popup = false
					this.selindex = -1
				} else if (this.selindex == val && this.sxArr[this.selindex].seltab) {
					this.popup = !this.popup
				} else {
					this.selindex = val
					this.popup = true
				}
			},
			// 筛选框关闭
			close() {
				this.popup = false
				this.selindex = -1
			},
			// 等级选择  选择星际
			gradeBtn(val) {
				let selstar = this.gradeArr[val].selstar || false
				this.$set(this.gradeArr[val], 'selstar', !selstar)
				let selstarArr = []
				this.gradeArr.forEach((item, index) => {
					if (item.selstar && item.star >= 0) {
						selstarArr.push(item.star)
					}
				})
				let sellevelArr = []
				this.gradeArr.forEach((item, index) => {
					if (item.selstar && item.level) {
						sellevelArr.push(item.level)
					}
				})
				this.star = selstarArr.join()
				this.level = sellevelArr.join()
			},

			// 排序选择
			pxBtn(n, order) {
				// this.pxactive = n
				// this.$set(this.pxArr[this.pxactive], 'selpx', order)
				// this.$set(this.sxArr[this.selindex], 'seltab', true)
				// this.$set(this.pxArr[3], 'selpx', 1)
				console.log(n, order)
				this.pxactive = n
				this.$set(this.sxArr[this.selindex], 'seltab', true)
				this.pxArr.forEach((item, index) => {
					if (n == index) {
						this.$set(this.pxArr[n], 'selpx', order)
					} else {
						this.$set(this.pxArr[index], 'selpx', '')
					}
				})
				this.popup = false
				// if (n == 0) {
				// 	this.reg = order == 1 ? 'asc' : 'desc'
				// }
				// if (n == 1) {
				// 	this.final_order = order == 1 ? 'asc' : 'desc'
				// }
				// if (n == 2) {
				// 	this.puls_expiration = order == 1 ? 'asc' : 'desc'
				// }
				// if (n == 3) {
				// 	this.fans_order = order == 1 ? 'asc' : 'desc'
				// }
				// if (n == 4) {
				// 	this.fans_sell = order == 1 ? 'asc' : 'desc'
				// }
				// if (n == 5) {
				// 	this.fans_moon_sell = order == 1 ? 'asc' : 'desc'
				// }
				// if (n == 6) {
				// 	this.fans_add_moon_sell = order == 1 ? 'asc' : 'desc'
				// }
				// if (n == 7) {
				// 	this.fans_self_moon_sell = order == 1 ? 'asc' : 'desc'
				// }
				// this.getfenlistAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},

			// 活跃度选择
			hydBtn(val) {
				let selhy = this.hydArr[val].selhy || false
				this.$set(this.hydArr[val], 'selhy', !selhy)
				let selhyArr = []
				this.hydArr.forEach((item, index) => {
					if (item.selhy) {
						selhyArr.push(item.id)
					}
				})
				console.log(selhyArr)
				this.active_status = selhyArr.join()
			},

			// 发展力
			fzlBtn(val) {
				let selfz = this.fzlArr[val].selfz || false
				this.$set(this.fzlArr[val], 'selfz', !selfz)
				let sefzfArr = []
				this.fzlArr.forEach((item, index) => {
					if (item.selfz) {
						sefzfArr.push(item.id)
					}
				})
				console.log(sefzfArr)
				this.power_status = sefzfArr.join()
			},

			// 消费力
			xflBtn(val) {
				let selxf = this.xflArr[val].selxf || false
				this.$set(this.xflArr[val], 'selxf', !selxf)
				let selxfArr = []
				this.xflArr.forEach((item, index) => {
					if (item.selxf) {
						selxfArr.push(item.id)
					}
				})
				console.log(selxfArr)
				this.consum_status = selxfArr.join()
			},

			// 重置等级
			sxHidedj(val) {

				this.gradeArr.forEach((item, index) => {
					this.$set(this.gradeArr[index], 'selstar', false)
				})
				this.$set(this.sxArr[this.selindex], 'seltab', false)
				this.popup = false
				this.selindex = -1
				this.star = []
				this.level = []
				// let selsrarArr = this.gradeArr.filter((item, index) => {
				// 	return item.selstar
				// })
				// console.log(selsrarArr)
				// if (selsrarArr.length > 0) {
				// 	this.$set(this.sxArr[this.selindex], 'seltab', true)
				// } else {

				// }
				// this.getfenlistAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// 重置筛选
			sxHidesx() {

				this.hydArr.forEach((item, index) => {
					this.$set(this.hydArr[index], 'selhy', false)
				})
				this.fzlArr.forEach((item, index) => {
					this.$set(this.fzlArr[index], 'selfz', false)
				})
				this.xflArr.forEach((item, index) => {
					this.$set(this.xflArr[index], 'selxf', false)
				})
				this.$set(this.sxArr[this.selindex], 'seltab', false)
				this.minimum = ''
				this.highest = ''
				this.popup = false
				this.selindex = -1
				this.active_status = []
				this.power_status = []
				this.consum_status = []
				// this.getfenlistAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// 查询等级
			async searchdj() {
				let selsrarArr = this.gradeArr.filter((item, index) => {
					return item.selstar
				})
				if (selsrarArr.length > 0) {
					this.$set(this.sxArr[this.selindex], 'seltab', true)
				} else {
					this.$set(this.sxArr[this.selindex], 'seltab', false)
				}
				this.popup = false
				// this.getfenlistAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// 查询筛选
			searsx() {
				let selhyArr = this.hydArr.filter((item, index) => {
					return item.selhy
				})
				let selfzArr = this.fzlArr.filter((item, index) => {
					return item.selfz
				})
				let selxfArr = this.xflArr.filter((item, index) => {
					return item.selxf
				})
				console.log(selhyArr.length, selfzArr.length, selxfArr.length)
				if (selhyArr.length > 0 || selfzArr.length > 0 || selxfArr.length > 0 || (this.minimum && this.highest)) {
					this.$set(this.sxArr[this.selindex], 'seltab', true)
				} else {
					this.$set(this.sxArr[this.selindex], 'seltab', false)
				}
				if (this.minimum <= this.highest) {
					this.popup = false
					// this.getfenlistAPI()
					this.mescroll && this.mescroll.resetUpScroll()
				} else {
					return this.$utils.msg(this.$t('common').请输入正确的最小值最大值)
				}

			},
			//粉丝列表接口
			// async getfenlistAPI() {
			// 	let pxobj = {}
			// 	this.pxArr.forEach((item, index) => {
			// 		pxobj[item.name] = item.selpx || ''
			// 	})
			// 	let total_sell = ''
			// 	if (this.minimum != '' && this.highest != '') {
			// 		total_sell = [this.minimum, this.highest].join()
			// 	} else {
			// 		total_sell = ''
			// 	}
			// 	let obj = {
			// 		// reg: this.reg,
			// 		// final_order: this.final_order,
			// 		// puls_expiration: this.puls_expiration,
			// 		// fans_order: this.fans_order,
			// 		// fans_sell: this.fans_sell,
			// 		// fans_moon_sell: this.fans_moon_sell,
			// 		// fans_add_moon_sell: this.fans_add_moon_sell,
			// 		// fans_self_moon_sell: this.fans_self_moon_sell,
			// 		keyword: this.keyword,
			// 		star: this.star,
			// 		active_status: this.active_status,
			// 		power_status: this.power_status,
			// 		consum_status: this.consum_status,
			// 		total_sell: total_sell || '',
			// 		level: this.level
			// 	}
			// 	let allObj = {
			// 		...pxobj,
			// 		...obj
			// 	}
			// 	const res = await this.$api.getfenlist(allObj)
			// 	this.fsArr = res.data.list
			// },
			upCallback(page) {
				if (this.tabId == 1) {
					let pxobj = {}
					this.pxArr.forEach((item, index) => {
						pxobj[item.name] = item.selpx || ''
					})
					let total_sell = ''
					if (this.minimum != '' && this.highest != '') {
						total_sell = [this.minimum, this.highest].join()
					} else {
						total_sell = ''
					}
					let obj = {
						// reg: this.reg,
						// final_order: this.final_order,
						// puls_expiration: this.puls_expiration,
						// fans_order: this.fans_order,
						// fans_sell: this.fans_sell,
						// fans_moon_sell: this.fans_moon_sell,
						// fans_add_moon_sell: this.fans_add_moon_sell,
						// fans_self_moon_sell: this.fans_self_moon_sell,
						keyword: this.keyword,
						star: this.star,
						active_status: this.active_status,
						power_status: this.power_status,
						consum_status: this.consum_status,
						total_sell: total_sell || '',
						level: this.level
					}
					if (page.num == 1) this.fsArr = []; //如果是第一页需手动制空列表
					this.$api.getfenlist({
						...pxobj,
						...obj,
						page: page.num,
						limit: page.size
					}).then(res => {
						let curPageData = res.data.list; //当前页的数据列表
						let curPageLen = curPageData?.length; //当前页的数据长度
						let totalPage = parseInt(res.data.count / 20) + 1; //总页数
						console.log(totalPage)
						let hasNext = page.num === totalPage ? false : true //根据页数判断是否有下一页
						this.fsArr = this.fsArr.concat(curPageData); //追加新数据
						this.mescroll.endSuccess(curPageLen, hasNext);
						this.statistics = res.data.statistics
					})
				} else {
					this.xseId = 0
					this.xstjId = 0
					this.djId = 0
					this.cjtjId = 0
					this.fsphYindex = 0
					this.fsphTindex = 0
					this.getnow()
					this.getoveralldataAPI()
					this.getServerData()

				}
			},
			// 滚动到底部
			upLoad() {
				if (this.tabId == 1) {
					console.log('555');
				}
			},

			// --------整体数据
			// 按等级、成交粉丝统计筛选
			ztsjBtn(e) {

			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					// let xsres = {
					// 	series: [{
					// 		data: this.salesStatistics
					// 	}]
					// };
					// let cjres = {
					// 	series: [{
					// 		data: this.cjfstjArr
					// 	}]
					// };
					let byxzres = {
						categories: this.categoriesadd,
						series: [{
							name: this.$t('fan').新增销售额,
							data: this.addseriesData
						}, ],
					};
					let byjsres = {
						categories: this.categoriessettl,
						series: [{
							name: this.$t('index').已结算销售额,
							data: this.settlseriesData
						}, ],
					};
					// this.xsetjChart = JSON.parse(JSON.stringify(xsres));
					// this.cjfsChart = JSON.parse(JSON.stringify(cjres));
					this.byxzChart = JSON.parse(JSON.stringify(byxzres));
					this.byjsChart = JSON.parse(JSON.stringify(byjsres));
				}, 500);
			},
			// 销售额画饼图
			async initx(data) {
				// chart 图表实例不能存在data里
				this.xsetjOpts.series[0].data = data
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.xsetjOpts)
			},
			//成交粉丝统计
			async initf(data) {
				// chart 图表实例不能存在data里
				this.cjfsOpts.series[0].data = data
				const chart = await this.$refs.chartReff.init(echarts);
				chart.setOption(this.cjfsOpts)
			},
			//获取当前的年月
			getnow() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = (currentDate.getMonth() + 1) < 10 ? `0${(currentDate.getMonth() + 1)}` : (currentDate
					.getMonth() + 1); // 月份从0开始，所以要加1
				this.thisMonth = year + '-' + month

				if (month == "01") {
					this.lastMonth = currentDate.getFullYear() - 1 + '-' + '12'
				} else {
					this.lastMonth = currentDate.getFullYear() + '-' + (currentDate.getMonth() < 10 ?
						`0${currentDate.getMonth()}` : currentDate.getMonth())
				}
				this.month = this.thisMonth
				this.getgoodprefAPI()
			},
			// 销售额筛序
			xseBtn(val) {
				this.xseId = val;
				if (this.xseId == 0) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.other_f_value || 0,
						}
					]

					this.initx(arr);
				}
				if (this.xseId == 1) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.up_plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.up_operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.up_other_f_value || 0,
						}
					]
					// arr[0].value = this.totalInfo.up_plus_beilv
					// arr[1].value = this.totalInfo.up_operate_beilv
					// arr[2].value = this.totalInfo.up_other_beilv
					this.initx(arr);
				}
				if (this.xseId == 2) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.total_plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.total_operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.total_other_f_value || 0,
						}
					]
					this.initx(arr);
				}
			},
			// 等级条件筛选
			djBtn(val) {
				this.djId = val;
				if (this.djId == 0) {
					this.djArr[0].num = this.totalInfo.day_vip
					this.djArr[1].num = this.totalInfo.day_pulsvip
					this.djArr[2].num = this.totalInfo.day_operator_vip
					this.djArr[3].num = this.totalInfo.day_operator_pulsvip
				}
				if (this.djId == 1) {
					this.djArr[0].num = this.totalInfo.moon_vip
					this.djArr[1].num = this.totalInfo.moon_pulsvip
					this.djArr[2].num = this.totalInfo.moon_operator_vip
					this.djArr[3].num = this.totalInfo.moon_operator_pulsvip
				}
				if (this.djId == 2) {
					this.djArr[0].num = this.totalInfo.total_vip
					this.djArr[1].num = this.totalInfo.total_pulsvip
					this.djArr[2].num = this.totalInfo.total_operator_vip
					this.djArr[3].num = this.totalInfo.total_operator_pulsvip
				}

			},
			// 销售统计
			xstjBtn(index) {
				this.xstjId = index
				if (this.xstjId == 0) {
					this.xstjArr[0].num = this.totalInfo.day_plus_num
					this.xstjArr[1].num = this.totalInfo.day_operate_num
				}
				if (this.xstjId == 1) {
					this.xstjArr[0].num = this.totalInfo.plus_num
					this.xstjArr[1].num = this.totalInfo.operate_num
				}
				if (this.xstjId == 2) {
					this.xstjArr[0].num = this.totalInfo.up_plus_num
					this.xstjArr[1].num = this.totalInfo.up_operate_num
				}

			},
			// 成交粉丝统计筛选
			cjtjBtn(val) {
				this.cjtjId = val;
				if (this.cjtjId == 0) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.day_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.day_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
				if (this.cjtjId == 1) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.moon_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.moon_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
				if (this.cjtjId == 2) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.total_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.total_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
			},
			// 余额筛序 -月份
			fsphYbtn(val) {
				this.fsphYindex = val;
				if (this.fsphYindex == 1) {
					this.month = this.lastMonth
				} else {
					this.month = this.thisMonth
				}
				this.getgoodprefAPI()
			},
			// 余额筛序 - 套餐
			fsphTbtn(val) {
				this.fsphTindex = val;
				this.getgoodprefAPI()
			},
			// 弹窗打开
			tcShow(val) {
				this.tcpop = true;
				this.tcType = val;
			},

			// 弹窗关闭
			tcHide() {
				this.tcpop = false;
			},
			// 粉丝管理-整体数据
			async getoveralldataAPI() {
				const res = await this.$api.getoveralldata()
				if (res && res.code == 1) {
					this.totalInfo = res.data.data
					// 转化为千分符展示
					this.totalInfo.moon_settl_sell = res.data.data.moon_settl_sell.toLocaleString()
					this.totalInfo.up_moon_settl_sell = res.data.data.up_moon_settl_sell.toLocaleString()
					this.totalInfo.total_sell = res.data.data.total_sell.toLocaleString()
					// 销售额统计
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.other_f_value || 0,
						}
					]
					this.initx(arr)
					// 销售统计
					this.xstjArr[0].num = this.totalInfo.day_plus_num
					this.xstjArr[1].num = this.totalInfo.day_operate_num
					// 贡献收益

					this.salesStatistics = arr
					// console.log(this.totalInfo.plus_beilv, this.totalInfo.operate_beilv)
					// console.log(arr)
					// 已结算销售额统计
					this.yjsArr[0].num = this.totalInfo.moon_sell
					this.yjsArr[1].num = this.totalInfo.expect_moon_sell
					this.yjsArr[2].num = this.totalInfo.expect_seven_sell
					this.yjsArr[3].num = this.totalInfo.up_moon_sell


					// 等级
					this.djArr[0].num = this.totalInfo.day_vip
					this.djArr[1].num = this.totalInfo.day_pulsvip
					this.djArr[2].num = this.totalInfo.day_operator_vip
					this.djArr[3].num = this.totalInfo.day_operator_pulsvip
					// 活跃度
					this.hydArrz[0].num = this.totalInfo.active_5
					this.hydArrz[1].num = this.totalInfo.active_4
					this.hydArrz[2].num = this.totalInfo.active_3
					this.hydArrz[3].num = this.totalInfo.active_2
					this.hydArrz[4].num = this.totalInfo.active_1
					// 成交粉丝数
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.day_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.day_fans_repeat_num || 0,
						},
					]

					// this.cjfstjArr = arrcj
					this.initf(arrcj)

					// 本月新增
					this.categoriesadd = []
					this.addseriesData = []
					res.data.add_list.forEach((item, index) => {
						this.categoriesadd.push(item.date)
						// if (uni.getStorageSync('currency') == 'USD') {
						// 	this.addseriesData.push(item.total_amt_award * uni.getStorageSync('rate'))
						// } else {

						// }
						this.addseriesData.push(item.total_amt_award)
					})
					// 已结算销售额 
					this.categoriessettl = []
					this.settlseriesData = []
					res.data.settl_list.forEach((item, index) => {
						this.categoriessettl.push(item.date)
						// if (uni.getStorageSync('currency') == 'USD') {
						// 	this.settlseriesData.push(item.total_amt_award * uni.getStorageSync('rate'))
						// } else {

						// }
						this.settlseriesData.push(item.total_amt_award)
					})
					this.getServerData();
					setTimeout(() => {
						this.mescroll.endSuccess(res.data, false);
					}, 500)
				}


			},
			//粉丝管理-整体数据-商品偏好
			async getgoodprefAPI() {
				const res = await this.$api.getgoodpref({
					goods_type: this.fsphTtab[this.fsphTindex].id,
					month: this.month
				})
				this.fsphLists = res.data
				let total = 0
				this.fsphLists.forEach((item, index) => {
					total += Number(item.total_product_num)
				})
				this.fsphTotalnum = total
				this.fsphLists.push({
					title: '合计',
					store_name: '',
					total_product_num: this.fsphTotalnum
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F5F5;
		// height: calc(100vh - 100rpx)
		min-height: 0;
	}

	// head
	.head-box {
		background: #FFFFFF;

		.head-inp {
			// width: 100%;
			height: 60rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			background: #F5F5F5;
			border-radius: 100rpx;

			.inp-img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			.inp-val {
				width: 500rpx;
				height: 60rpx;
				font-size: 28rpx;
			}
		}

		// tab
		.head-tab {
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;

			.tab-list {
				width: 50%;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				position: relative;

				.tab-text {
					font-size: 32rpx;
					color: rgba(255, 255, 255, 0.5);
				}

				.tab-bor {
					width: 60rpx;
					height: 4rpx;
					background: #FFFFFF;
					border-radius: 100rpx;
					position: absolute;
					left: 50%;
					bottom: 6rpx;
					transform: translate(-50%, 0);
				}
			}
		}

		// 搜索
		.search-box {
			padding: 14rpx 24rpx;
			box-sizing: border-box;

			.search-con {
				background: #F5F5F5;
				border-radius: 100rpx;
				padding: 0 20rpx;
				box-sizing: border-box;

				.search-icon {
					width: 32rpx;
					height: 32rpx;
				}

				.search-inp {
					width: 600rpx;
					height: 60rpx;
					margin-left: 16rpx;
					color: #333;
					font-size: 28rpx;
				}
			}
		}

		// 筛选
		.sx-box {
			position: relative;

			.sx-list {
				width: 250rpx;
				height: 90rpx;

				.sx-text {
					color: #999999;
					font-size: 28rpx;
				}

				.sx-img {
					width: 20rpx;
					margin-left: 8rpx;
				}
			}
		}
	}

	// 筛选弹窗
	.sxpop-box {
		width: 100%;
		position: absolute;
		top: 90rpx;
		left: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.5);

		.sxpop-con {
			background: #FFFFFF;
			overflow-y: scroll;

			// 等级
			.grade-con {
				padding: 32rpx 24rpx;

				.grade-list {
					height: 61rpx;
					text-align: center;
					line-height: 61rpx;
					background: rgba(127, 127, 127, 0.06);
					border: 2rpx solid rgba(127, 127, 127, 0.06);
					font-size: 26rpx;
					color: #666666;
					border-radius: 8rpx;
					margin: 0 20rpx 32rpx 0;
					box-sizing: border-box;
				}

				.grade-listf {
					height: 61rpx;
					text-align: center;
					line-height: 61rpx;
					background: rgba(127, 127, 127, 0.06);
					border: 2rpx solid rgba(127, 127, 127, 0.06);
					font-size: 26rpx;
					color: #666666;
					border-radius: 8rpx;
					margin: 0 20rpx 32rpx 0;
					box-sizing: border-box;
				}

				.grade-ac {
					color: #EE6753;
					background: #FFD9D7 !important;
					border: 2rpx solid #EE6753 !important;
				}
			}

			// 排序
			.px-con {
				padding: 0 24rpx;
				overflow-y: scroll;

				.px-list {
					height: 100rpx;
					border-bottom: 2rpx solid #EEEEEE;

					.px-text {
						font-size: 30rpx;
					}

					.px-img {
						width: 100rpx;
						height: 46rpx;
						border-radius: 4px;
						margin-right: 24rpx;
						background: #F8F8F8;
					}

					.fstj-h-t-ac {
						background: #FFD9D7;
						border: 2rpx solid #EE6753;
						color: #EE6753;
					}
				}
			}

			// 筛选
			.sx-con {
				padding: 0 24rpx 40rpx;
				overflow-y: scroll;

				.sc-list {

					// margin-top: 20rpx;
					.sc-tit {
						font-size: 28rpx;
						margin-bottom: 16rpx;
					}

					.sc-inp {
						width: 330rpx;
						height: 61rpx;
						font-size: 28rpx;
						text-align: center;
						background: rgba(127, 127, 127, 0.07);
						border-radius: 8rpx;
					}

					.sc-bor {
						margin: 0 20rpx;
						color: #999999;
						font-size: 28rpx;
					}

					.sc-item {
						font-size: 26rpx;
						height: 61rpx;
						text-align: center;
						line-height: 61rpx;
						border-radius: 8rpx;
						margin-bottom: 24rpx;
						background: rgba(127, 127, 127, 0.07);
						border: 2rpx solid rgba(127, 127, 127, 0.07);
					}

					.sc-ac {
						color: #EE6753;
						background: #FFD9D7;
						border: 2rpx solid #EE6753;
					}
				}
			}

			.sxpop-bot {
				width: 50%;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				font-size: 28rpx;

			}

			.sxpop-cz {
				color: #999999;
			}

			.sxpop-qd {
				background: #F44A42;
				color: #FFFFFF;
			}
		}
	}

	.grade-list:nth-child(4n) {
		margin-right: 0 !important;
	}


	.scroll-box {
		padding: 24rpx 24rpx 0 24rpx;
		box-sizing: border-box;
	}

	// 粉丝列表
	.list-box {
		padding: 32rpx 32rpx 0rpx 32rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
		border-radius: 16rpx;
		background: #FFFFFF;

		.list-head {
			display: flex;
			position: relative;

			.head-right {
				width: 10rpx;
				height: 18rpx;
				position: absolute;
				right: 0rpx;
				top: 30rpx;
			}

			.list-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100rpx;
				border: 2rpx solid #FFFFFF;
			}

			.list-con {
				width: 530rpx;
				margin-left: 20rpx;

				.list-name {
					font-size: 30rpx;
					margin-right: 20rpx;
				}

				.list-xj {
					width: 115rpx;
				}

				.list-bz {
					font-size: 24rpx;
					margin-top: 18rpx;
				}

				.lable-box {
					margin-top: 18rpx;

					.lable-list {
						padding: 6rpx 16rpx;
						border-radius: 100rpx;
						font-size: 24rpx;
						margin: 0 16rpx 16rpx 0;
					}

					.lable-one {
						background: #FFE5E4;
						border: 2rpx solid #F44A42;
						color: #F44A42;
					}

					.lable-two {
						background: #FFF0CC;
						border: 2rpx solid #FD9E37;
						color: #FD9E37;
					}

					.lable-three {
						background: #F0F7E5;
						border: 2rpx solid #70B603;
						color: #70B603;
					}

					.lable-four {
						background: rgba(195, 195, 195, 0.1);
						border: 2rpx solid #B9B9B9;
						color: #B9B9B9;
					}
				}

			}
		}

		.tj-con {
			margin-top: 20rpx;
			// border-bottom: 2rpx solid #EEEEEE;

			.con-item {
				width: 50%;
				margin-bottom: 40rpx;

				.con-text {
					color: #666666;
					font-size: 24rpx;
					margin-bottom: 16rpx;
				}

				.con-num {
					color: #333333;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		.time-box {
			color: #666666;
			font-size: 24rpx;
			margin-top: 24rpx;
		}
	}

	page {
		background: #F5F5F5;
	}

	// 弹窗
	.tc-box {
		width: 650rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 30rpx 20rpx 0;
		position: relative;

		.tc-head {
			.tc-h-icon {
				width: 7rpx;
				margin-right: 16rpx;
			}

			.tc-h-tit {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 12rpx;
			}

			.tc-h-text {
				font-size: 24rpx;
			}
		}

		.tc-con {
			padding: 10rpx 0 0 0;

			.tc-c-head {
				font-weight: bold;
				background: #F8F8F8;
				border-bottom: 2rpx solid #EEEEEE;
			}

			.tc-c-list {
				max-height: 530rpx;
				overflow-y: scroll;
			}

			.tc-c-item {
				border-bottom: 2rpx solid #EEEEEE;
			}

			.tc-c-text {
				font-size: 24rpx;
				padding: 20rpx 16rpx;
			}

			.tc-c-a {
				width: 160rpx;
			}

			.tc-c-b {
				width: 300rpx;
				border-left: 2rpx solid #EEEEEE;
				border-right: 2rpx solid #EEEEEE;
			}

			.tc-c-c {
				width: 160rpx;
			}
		}

		.tc-bot {
			height: 97rpx;
			text-align: center;
			line-height: 97rpx;
			font-size: 30rpx;
			color: #F44A42;
			border-top: 2rpx solid #EEEEEE;
			box-sizing: border-box;
		}


		.tc-h-gb {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: 24rpx;
			top: 34rpx;
		}
	}

	.tc-c-item:nth-child(2n) {
		background: #F8F8F8 !important;
	}

	.tc-c-item:last-child {
		border-bottom: none !important;
	}

	// 整体数据
	.ztsj-box {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-bottom: 24rpx;

		.ztsj-head {
			padding: 32rpx 0;
			font-size: 30rpx;
			font-weight: bold;
		}

		// 整体状态
		.ztzt-box {
			.ztzt-list {
				width: 50%;
				text-align: center;

				.ztzt-text {
					font-size: 28rpx;
					margin-right: 12rpx;
				}

				.ztzt-icon {
					width: 28rpx;
					height: 28rpx;
				}

				.ztzt-img {
					width: 170rpx;
					height: 170rpx;
					margin-top: 30rpx;
				}
			}
		}

		// 已结算销售额统计
		.yjs-box {
			.yjs-list {
				width: 50%;
				margin-bottom: 40rpx;

				.yjs-text {
					font-size: 24rpx;
					margin-bottom: 16rpx;
				}

				.yjs-num {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		// 粉丝统计
		.fstj-list {
			padding: 40rpx 0;

			.fsth-head {
				.fstj-h-bor {
					width: 6rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				.fstj-h-text {
					font-size: 28rpx;
				}
			}

			.fstj-l-item {
				width: 33%;
				text-align: center;
				margin-top: 40rpx;

				.fstj-l-text {
					font-size: 24rpx;
					margin-bottom: 16rpx;
					font-weight: bold;
				}

				.fstj-l-num {
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}

		// 成交粉丝统计
		.cjtj-box {
			padding: 52rpx 0 40rpx;

			.cjtj-rs {
				font-size: 30rpx;
				font-weight: bold;
			}

			.cjtj-left {

				.cjtj-l-bor {
					width: 16rpx;
					height: 16rpx;
					border-radius: 4rpx;
					margin: 8rpx 12rpx 0 0;
				}

				.cjtj-l-text {
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		// 粉丝商品偏好
		.fsph-box {
			padding: 30rpx 0;

			.fsph-con {
				padding-top: 32rpx;

				.fsph-c-head {
					background: #FEF3E2;
					border-radius: 10rpx 10rpx 0 0;

					.fsph-h-pub {
						// height: 80rpx;
						text-align: center;
						// line-height: 80rpx;
					}
				}

				.fsph-c-bot {
					height: 80rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 10rpx 10rpx 0 0;
					border-bottom: 2rpx solid #EEEEEE;
				}

				.fsph-list {
					width: 100%;
					// height: 400rpx;
					// overflow-y: scroll;
					background: rgba(127, 127, 127, 0.06);

					.fsph-item {
						text-align: center;
						border-bottom: 2rpx solid #EEEEEE;
					}
				}

				.fsph-l-a {
					width: 96rpx;
					font-size: 24rpx;
				}

				.fsph-l-b {
					width: 410rpx;
					font-size: 24rpx;
					padding: 34rpx 20rpx;
					box-sizing: border-box;
					border-left: 2rpx solid #EEEEEE;
					border-right: 2rpx solid #EEEEEE;
				}

				.fsph-l-c {
					width: 133rpx;
					font-size: 24rpx;
				}


				.fsph-c-list {
					font-size: 24rpx;
				}
			}
		}

		// 按等级、粉丝统计、销售额统计、粉丝商品偏好--tab
		.fstj-h-tab {
			min-width: 180rpx;
			height: 50rpx;
			color: #999999;
			font-size: 24rpx;
			border-radius: 8rpx;
			text-align: center;
			line-height: 50rpx;
			background: rgba(127, 127, 127, 0.07);
			border: 2rpx solid rgba(127, 127, 127, 0.07);
			margin-left: 12rpx;
		}

		.fstj-h-t-ac {
			background: #FFD9D7;
			border: 2rpx solid #EE6753;
			color: #EE6753;
		}
	}


	.charts-box {
		width: 100%;
		height: 300px;
	}

	/deep/.tabBox2 .mescroll-upwarp {
		display: none;
	}
</style>